﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport"
          content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) {
            document.write('<script src="js/jquery-1.9.1.min.js"><\/script>');
        }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
<div class="demo-container">
    <ul class="breadcrumb">
        <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span>
        </li>
        <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
        <li class="active">Group Headers</li>
    </ul>
    <div class="alert">
        Group your column headers together
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#demo">Demo</a></li>
        <li><a href="#setup">Setup</a></li>
        <li><a href="#docs">Docs</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="demo">
            <table class="table footable">
                <thead>
                    <tr class="footable-group-row">
                        <th data-group="group1" colspan="3">Group 1</th>
                        <th data-group="group2" colspan="3">Group 2</th>
                        <th data-group="group3" colspan="3">Group 3</th>
                    </tr>
                    <tr>
                        <th data-group="group1" data-ignore="true"><input type="checkbox"/></th>
                        <th data-group="group1">ID</th>
                        <th data-group="group1" data-hide="phone,tablet">Date 1</th>
                        <th data-group="group2" data-hide="phone" colspan="3" data-names="Date 2,Date 3,Date 4">Dates 2, 3, 4</th>
                        <th data-group="group3" data-hide="phone">Date 5</th>
                        <th data-group="group3" data-hide="phone,tablet">Note</th>
                        <th data-group="group3" data-hide="phone,tablet">Section</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>2</td>

                    <td>03/01/2014</td>

                    <td>10/01/2016</td>
                    <td>01/01/2014</td>
                    <td>23/01/2014</td>

                    <td>18/01/2014</td>
                    <td>000-003</td>
                    <td>INT</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>3</td>

                    <td>03/01/2015</td>

                    <td>10/01/2015</td>
                    <td>02/01/2014</td>
                    <td>24/01/2014</td>

                    <td>18/01/2015</td>
                    <td>000-001</td>
                    <td>INT</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>1</td>

                    <td>03/01/2016</td>

                    <td>10/01/2014</td>
                    <td>03/01/2014</td>
                    <td>22/01/2014</td>

                    <td>18/01/2016</td>
                    <td>000-002</td>
                    <td>INT</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane" id="docs">
            <h4>Header Groups</h4>
            <p>It is possible to have advanced table header setups where your column headers are grouped. The groupings will also be inside the detail rows.</p>
            <pre>
&lt;table class=&quot;table footable&quot;&gt;
    &lt;thead&gt;
    &lt;tr class=&quot;footable-group-row&quot;&gt;
        &lt;th data-group=&quot;group1&quot; colspan=&quot;3&quot;&gt;Group 1&lt;/th&gt;
        &lt;th data-group=&quot;group2&quot; colspan=&quot;3&quot;&gt;Group 2&lt;/th&gt;
        &lt;th data-group=&quot;group3&quot; colspan=&quot;3&quot;&gt;Group 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th data-group=&quot;group1&quot; data-ignore=&quot;true&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;/th&gt;
        &lt;th data-group=&quot;group1&quot;&gt;ID&lt;/th&gt;
        &lt;th data-group=&quot;group1&quot; data-hide=&quot;phone,tablet&quot;&gt;Date 1&lt;/th&gt;
        &lt;th data-group=&quot;group2&quot; data-hide=&quot;phone&quot; colspan=&quot;3&quot; data-names=&quot;Date 2,Date 3,Date 4&quot;&gt;Dates 2, 3, 4&lt;/th&gt;
        &lt;th data-group=&quot;group3&quot; data-hide=&quot;phone&quot;&gt;Date 5&lt;/th&gt;
        &lt;th data-group=&quot;group3&quot; data-hide=&quot;phone,tablet&quot;&gt;Note&lt;/th&gt;
        &lt;th data-group=&quot;group3&quot; data-hide=&quot;phone,tablet&quot;&gt;Section&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;</pre>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('table').footable();
    });
</script>
</body>
</html>
